<template>
  <div class="errata">
    <div class="e-header">
      <a href="javascript:;" @click="suggestVisible = true">我要报修</a>
    </div>
    <template v-if="list.length">
      <ul class="e-list" v-if="list.length">
        <li class="e-item" v-for="item in list" :key="item.id">
          <div class="e-cover">
            <div class="e-avatar" v-if="item.file">
              <img :src="bindIMG(item.file.filename)" alt="" />
              <span class="el-icon-notebook-2">{{ item.bookName }}</span>

            </div>
            <el-tag :type="errataState[item.state].type" effect="plain" v-if="errataState[item.state]">
              {{ errataState[item.state].name }}
            </el-tag>
          </div>

          <div class="e-content">
            <div class="title">
              {{ item.title || '...' }}

            </div>
            <div class="description">
              {{ item.description }}
              <!-- <a href="javascript:;">查看详情>></a> -->
            </div>
          </div>
          <div class="e-info">
            <div class="info">
              <span class="el-icon-user-solid author">{{ item.username }}</span>
              <span class="el-icon-date date">{{ item.createTime | formatDate }}</span>
            </div>
          </div>
        </li>
      </ul>
      <el-pagination @size-change="handleSizeChange($event, fetchData)"
        @current-change="handleCurrentChange($event, fetchData)" :page-sizes="[1, 2, 5, 10]"
        layout="total,sizes, prev, pager, next" :total="total" class="t-pagination">
      </el-pagination>
    </template>

    <div class="not-found" style="height:200px" v-else>
      暂无报修记录
    </div>
    <el-dialog :visible="suggestVisible" @close="suggestVisible = false">
      <div class="e-submit">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="图书名称" prop="bookId">
            <el-select v-model="form.bookId" filterable>
              <el-option v-for="item in miniBook()" :key="item.id" :value="item.id" :label="item.name"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报修标题" prop="title">
            <el-input v-model="form.title"> </el-input>
          </el-form-item>
          <el-form-item label="报修内容" prop="description">
            <el-input type="textarea" :autoSize="{ minRow: 3, maxRows: 6 }" resize="none" v-model="form.description">
            </el-input>
          </el-form-item>
        </el-form>
        <a href="javascript:;" class="submit" @click="submit('form')">提交报修</a>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import mixin from '@mixins'
import { errataState } from '@static'
import { mapActions, mapGetters, mapState } from 'vuex'
import { bindIMG } from '@utils'
export default {
  mixins: [mixin.home],
  data () {
    return {
      suggestVisible: false,
      errataState,
      form: {
        bookId: '',
        title: ''
      },
      rules: {
        bookId: [{ required: true, message: '请选择需要报修的图书', trigger: 'blur' }],
        title: [{ required: true, message: '请输入报修标题', trigger: 'blur' }],
        description: [{ required: true, message: '请输入报修内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    ...mapActions(['getAllBook', 'getAllFile', 'getAllCategory']),
    bindIMG,
    async fetchData () {
      const { list, total } = await this.$api.getErrataList(this.query)
      list.forEach((item) => {
        item.file = this.getFileById(item.userId)
      })
      console.log(list)
      this.list = list
      this.total = total
    },
    // done anchor
    anchor (name) {
      const anchorElm = document.getElementById(name)
      if (anchorElm) {
        anchorElm.scrollIntoView()
      }
    },
    submit (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return
        const book = this.miniBook().filter((item) => item.id === this[formName].bookId)
        Object.assign(this[formName], {
          userId: this.user.id,
          username: this.user.name,
          createTime: Date.now(),
          updateTime: Date.now(),
          state: 0,
          bookName: book[0].name
        })
        const { success } = await this.$api.addErrata(this[formName])
        this.handleSuccess(success, '报修提交', () => {
          this.fetchData()
          this.resetForm(formName)
          this.suggestVisible = false
        })
      })
    }
  },
  computed: {
    ...mapGetters({ miniBook: 'getMiniBook', getFileById: 'getFileById' }),
    ...mapState({ user: 'currentUser' })
  },
  async created () {
    await this.getAllCategory()
    this.fetchData()
    this.getAllBook()
    this.getAllFile()
  }
}
</script>

<style lang="less" scoped>
.errata {
  padding: 20px 40px;
  // border: 1px solid #d7d7d7;
  // background-color: #fff;

  h4 {
    font-size: 24px;
    padding-left: 10px;
    text-align: center;

    a {
      font-size: 16px;
      font-weight: 400;
      color: #eba613;
    }
  }
}

.e-header {
  position: relative;
  padding-top: 50px;

  a {
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    border: 1px solid #eba613;
    color: #eba613;
    border-radius: 20px;
    padding: 8px 16px;

    &:hover {
      background: #eba613;
      color: #fff;
    }
  }

  .nav-tag {
    margin-right: 10px;
    cursor: pointer;

    &:hover {
      background-color: #fafafa;
    }

    &.active {}
  }
}

.e-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.e-item {
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  height: 300px;
  background-color: #fff;
  border: 1px solid #eba613;
  border-radius: 4px;
  display: flex;
  flex-direction: column;

  &:hover {
    background-color: #eba7131c;
  }
}

.e-avatar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;

  img {
    width: 50px;
    height: 50px;
  }
}

.e-info {
  font-size: 13px;

  .info {
    margin: 6px 0 10px;

    span {
      color: #888;
      // font-size: 15px;
    }

    .author {
      margin-right: 14px;
    }
  }

  .el-tag {
    margin-left: 10px;
  }

}

.el-form {
  margin-top: 14px;

  .el-select {
    width: 100%;
  }
}

.e-submit {
  padding: 20px;

  .submit {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #eba613;
    border-radius: 4px;
    color: #fff;
  }
}

[class^='el-icon'] {

  &::before,
  &:before {
    margin-right: 4px;
  }
}

.e-cover {
  display: flex;
  justify-content: space-between;
}

.e-content {
  flex: 1;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;
    font-size: 18px;
    color: #333;
    font-weight: 700;

  }

  .description {
    color: #333;

    a {
      color: #eba613;
    }
  }

}

.errata {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}
</style>
